<template>
  <div class="ui-con-box">
    <h2>Message Box</h2>
    <h5>模拟系统的消息提示框实现的一套静态对话框组件，用于消息提示、确认消息和提交内容。</h5>
    <h3>消息提示1</h3>
    <h5>当用户进行操作时会被触发，该对话框</h5>
    <div class="ui-message-show  mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(0)'>点击打开 Message Box</span>
      </div>
      <transition name="fade">
        <div class="ui-meta" v-show="isDivShow[0]">
          <div class="ui-description">
            <pre>
          <code class="language-markup">
        <script type="prism-html-markup">
        <div role="alert " class="rob-alert rob-alert-dismissible">
                <button type="button" data-dismiss="rob-alert" aria-label="Close" class="rob-alert-close">
                    <span aria-hidden="true">×</span>
                </button>
                <div class="rob-alert-content">
                    <i class="bg_icon qb-icon-active"></i>
                    <div>
                        <div>*****保存成功</div>
                    </div>
                </div>
                <div class="rob-alert-button-color">
                    <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">保存成功</button>
                </div>
            </div>
        </script>
          </code>
          </pre>

          </div>
          <div class="ui-highlight-code">

          </div>
        </div>
      </transition>
      <div @click="targetBtn(0)" class="ui-message-show-code">&#9660;{{btnText[0]}}</div>
    </div>

    <h3>消息提示2</h3>
    <h5>提示用户确认其已经触发的操作，并询问用户是否用到此操作时会用到的对话框</h5>
    <div class="ui-message-show mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(1)'>点击打开 Message Box</span>
      </div>
      <div class="ui-meta" v-show="isDivShow[1]">
        <div class="ui-description">
<pre>
    <code class="language-markup">
        <script type="prism-html-markup">
            <div id="alert2" class="rob-alert rob-alert-dismissible" role="alert ">
              <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close">
                  <span aria-hidden="true">×</span>
              </button>
              <div class="rob-alert-content">
                  <!--qb-icon-active  保存成功-->
                  <!--qb-icon-failure 保存失败-->
                  <i class="bg_icon qb-icon-active">
                  </i>
                  <div class="">
                      <div>*****保存成功</div>
                  </div>
              </div>
              <div class="rob-alert-button-color">
                  <button type="button" class="rob-btn rob-btn-minor rob-btn-circle ">继续操作</button>
                  <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">查看结果</button>
              </div>
          </div>
        </script>
    </code>
</pre>


        </div>
        <div class="ui-highlight-code">
        </div>
      </div>
      <div @click="targetBtn(1)" class="ui-message-show-code">&#9660;{{btnText[1]}}</div>
    </div>
    <h3>消息提示3</h3>
    <h5>提示用户确认其已经触发的操作，并询问用户是否用到此操作时会用到的对话框</h5>
    <div class="ui-message-show mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(2)'>点击打开 Message Box</span>
      </div>
      <div class="ui-meta" v-show="isDivShow[2]">
        <div class="ui-description">
<pre>
    <code class="language-markup">
        <script type="prism-html-markup">
<div id="alert3" class="rob-alert rob-alert-dismissible" role="alert ">
  <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close">
      <span aria-hidden="true">×</span>
  </button>
  <div class="rob-alert-content">
      <i class="bg_icon qb-icon-failure">
      </i>
      <div class="">
          <div>*****失败</div>
      </div>
  </div>
  <div class="rob-alert-button-color">
      <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">知道了</button>
  </div>
</div>

        </script>
    </code>
</pre>

        </div>
        <div class="ui-highlight-code">
        </div>
      </div>
      <div @click="targetBtn(2)" class="ui-message-show-code">&#9660;{{btnText[2]}}</div>
    </div>

    <h3>消息提示4</h3>
    <h5>提示用户确认其已经触发的操作，并询问用户是否用到此操作时会用到的对话框</h5>
    <div class="ui-message-show mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(4)'>点击打开 Message Box</span>
      </div>
      <div class="ui-meta" v-show="isDivShow[3]">
        <div class="ui-description">
        <pre>
          <code class="language-markup">
            <script type="prism-html-markup">
  <div id="alert4" class="rob-alert rob-alert-dismissible" role="alert ">
    <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>

    <div class="rob-alert-content">

        <i class="bg_icon qb-icon-loading">
        </i>
        <div class="">
            <div>处理中...</div>
        </div>
    </div>
  </div>
            </script>
          </code>
        </pre>
          
        </div>
        <div class="ui-highlight-code">

        </div>
      </div>
      <div @click="targetBtn(3)" class="ui-message-show-code">&#9660;{{btnText[3]}}</div>
    </div>


 <h3>消息提示5</h3>
    <h5>提示用户确认其已经触发的操作，并询问用户是否用到此操作时会用到的对话框</h5>
    <div class="ui-message-show mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(5)'>点击打开 Message Box</span>
      </div>
      <div class="ui-meta" v-show="isDivShow[5]">
        <div class="ui-description">
        <pre>
          <code class="language-markup">
            <script type="prism-html-markup">
  <div id="alert5" class="rob-alert rob-alert-dismissible" role="alert ">
      <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close">
          <span aria-hidden="true">×</span>
      </button>

      <div class="rob-alert-content">
          <div class="">
              <div>确定要删除吗？</div>
          </div>
      </div>
      <div class="rob-alert-button-color">
          <button type="button" class="rob-btn rob-btn-minor rob-btn-circle ">继续操作</button>
          <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">查看结果</button>
      </div>
  </div>
            </script>
          </code>
        </pre>
          
        </div>
        <div class="ui-highlight-code">

        </div>
      </div>
      <div @click="targetBtn(4)" class="ui-message-show-code">&#9660;{{btnText[4]}}</div>
    </div>



<h3>消息提示6</h3>
    <h5>提示用户确认其已经触发的操作，并询问用户是否用到此操作时会用到的对话框</h5>
    <div class="ui-message-show mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(6)'>点击打开 Message Box</span>
      </div>
      <div class="ui-meta" v-show="isDivShow[6]">
        <div class="ui-description">
        <pre>
          <code class="language-markup">
            <script type="prism-html-markup">
<div  class="rob-alert container rob-alert-dismissible qb-min-380-g">
    <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <div class="rob-alert-title rob-alert-title-color text-center">用图编辑</div>
    <div class="rob-alert-content">
        <div class="rob-row">
        <div class="rob-col-lg-24 rob-col-md-24 rob-col-sm-24 rob-col-xs-24">
            <div class="rob-col-lg-6 rob-col-md-6 rob-col-sm-6 rob-col-xs-6 qb-pd0-g">
                <label class="rob-input-label text-right ">用途:
                </label>
            </div>
            <div class="rob-col-lg-16 rob-col-md-16 rob-col-sm-16 rob-col-xs-16 text-left">
                <div class="rob-input-item">
                    <input type="text" class="rob-input">
                </div>
            </div>
        </div>
        </div>
    </div>
      <div class="rob-alert-button rob-alert-button-45">
          <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">去关联</button>
      </div>
  </div>
            </script>
          </code>
        </pre>
          
        </div>
        <div class="ui-highlight-code">

        </div>
      </div>
      <div @click="targetBtn(6)" class="ui-message-show-code">&#9660;{{btnText[6]}}</div>
    </div>

<h3>消息提示7</h3>
    <h5>提示用户确认其已经触发的操作，并询问用户是否用到此操作时会用到的对话框</h5>
    <div class="ui-message-show mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(7)'>点击打开 Message Box</span>
      </div>
      <div class="ui-meta" v-show="isDivShow[7]">
        <div class="ui-description">
        <pre>
          <code class="language-markup">
            <script type="prism-html-markup">
  <div id="alert7" class="rob-alert container rob-alert-dismissible">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            <div class="qb-column-header-g qb-column-header-g--button">
                <ol class="rob-breadcrumb rob-breadcrumb-pointed">
                    <li class="active"><a href="#">贷款进度查询</a></li>
                </ol>
            </div>
            <div class="rob-form-group rob-col-lg-24">
                <div class="rob-col-lg-24 rob-col-md-24 rob-col-sm-24 rob-col-xs-24 qb-alert-g__top">
                    <div class="qb-select-menu-g qb-alert-g__top__high text-left">
                        <div class="rob-row">
                            <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24 qb-rg-bdsilid-g">
                                <div class="qb-select-box-g">
                                    <p>可选菜单：</p>
                                    <div class="qb-c-search-g">
                                        <input type="text" class="search-inp">
                                        <i class="qb-c-search-g__icon-search qb-icon-search"></i>
                                    </div>
                                    <label>管理员但<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>张三<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>李四<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                </div>
                            </div>
                            <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24">
                                <p class="search-bt60">可选菜单：</p>

                                <label>管理员但<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>张三<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>李四<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                            </div>
                        </div>
                    </div>
                    <div class="rob-col-lg-5 rob-col-md-5 rob-col-sm-5 rob-col-xs-24 qb-pd0-g">
                        <div class="qb-red-g rob-input-label text-left "></div>
                    </div>
                </div>
            </div>
            <div class="btn-box">
                <button class="rob-btn rob-btn-danger rob-btn-circle " type="button">搜索</button>
                <button class="rob-btn rob-btn-minor rob-btn-circle " type="button">清除</button>

            </div>
        </div>
            </script>
          </code>
        </pre>
          
        </div>
        <div class="ui-highlight-code">
        </div>
      </div>
      <div @click="targetBtn(7)" class="ui-message-show-code">&#9660;{{btnText[7]}}</div>
    </div>


<h3>消息提示8</h3>
    <h5>提示用户确认其已经触发的操作，并询问用户是否用到此操作时会用到的对话框</h5>
    <div class="ui-message-show mb60">
      <div class="ui-msg-col ui-msg-pd40">
        <span @click='openBox(8)'>点击打开 Message Box</span>
      </div>
      <div class="ui-meta" v-show="isDivShow[7]">
        <div class="ui-description">
        <pre>
          <code class="language-markup">
            <script type="prism-html-markup">
<div id="alert8" class="rob-alert container rob-alert-dismissible">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            <div class="qb-column-header-g qb-column-header-g--button">
                <ol class="rob-breadcrumb rob-breadcrumb-pointed">
                    <li class="active"><a href="#">贷款进度查询</a></li>
                </ol>
            </div>
            <div class="rob-form-group rob-col-lg-24">
                <div class="rob-col-lg-24 rob-col-md-24 rob-col-sm-24 rob-col-xs-24 qb-alert-g__top">
                    <div class="qb-select-menu-g qb-alert-g__top__high text-left">
                        <div class="rob-row">
                            <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24 qb-rg-bdsilid-g">
                                <div class="qb-select-box-g">
                                    <p>可选菜单：</p>
                                    <div class="qb-c-search-g">
                                        <input type="text" class="search-inp">
                                        <i class="qb-c-search-g__icon-search qb-icon-search"></i>
                                    </div>
                                    <label>管理员但<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>张三<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>李四<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                </div>
                            </div>
                            <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24">
                                <p class="search-bt60">可选菜单：</p>

                                <label>管理员但<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>张三<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>李四<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                            </div>
                        </div>
                    </div>
                    <div class="rob-col-lg-5 rob-col-md-5 rob-col-sm-5 rob-col-xs-24 qb-pd0-g">
                        <div class="qb-red-g rob-input-label text-left "></div>
                    </div>
                </div>
            </div>
            <div class="btn-box">
                <button class="rob-btn rob-btn-danger rob-btn-circle " type="button">搜索</button>
                <button class="rob-btn rob-btn-minor rob-btn-circle " type="button">清除</button>
            </div>
        </div>
            </script>
          </code>
        </pre>
          
        </div>
        <div class="ui-highlight-code">
        </div>
      </div>
      <div @click="targetBtn(8)" class="ui-message-show-code">&#9660;{{btnText[8]}}</div>
    </div>


    <div class="rob-alert-cover" v-if="isBoxShow[0]">
      <div class="rob-alert rob-alert-dismissible" role="alert ">
        <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(0)">
          <span aria-hidden="true">×</span>
        </button>
        <div class="rob-alert-content">
          <!--qb-icon-active  保存成功-->
          <!--qb-icon-failure 保存失败-->
          <i class="bg_icon qb-icon-active">
          </i>
          <div class="">
            <div>*****保存成功</div>
          </div>
        </div>
        <div class="rob-alert-button-color">
          <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">保存成功</button>
        </div>
      </div>
    </div>

    <div class="rob-alert-cover" v-if="isBoxShow[1]">
     <div id="alert2" class="rob-alert rob-alert-dismissible" role="alert ">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(1)">
                <span aria-hidden="true">×</span>
            </button>

            <div class="rob-alert-content">
                <!--qb-icon-active  保存成功-->
                <!--qb-icon-failure 保存失败-->
                <i class="bg_icon qb-icon-active">
                </i>
                <div class="">
                    <div>*****保存成功</div>

                </div>
            </div>
            <div class="rob-alert-button-color">
                <button type="button" class="rob-btn rob-btn-minor rob-btn-circle ">继续操作</button>
                <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">查看结果</button>
            </div>
        </div>
    </div>

    <div class="rob-alert-cover" v-if="isBoxShow[2]">
     <div id="alert3" class="rob-alert rob-alert-dismissible" role="alert ">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(2)">
                <span aria-hidden="true">×</span>
            </button>

            <div class="rob-alert-content">
                <i class="bg_icon qb-icon-failure">
                </i>
                <div class="">
                    <div>*****失败</div>

                </div>
            </div>
            <div class="rob-alert-button-color">
                <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">知道了</button>
            </div>
        </div>
    </div>

    <div class="rob-alert-cover" v-if="isBoxShow[3]">
     <div id="alert4" class="rob-alert rob-alert-dismissible" role="alert ">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(3)">
                <span aria-hidden="true">×</span>
            </button>
            <div class="rob-alert-content">
                <i class="bg_icon qb-icon-loading">
                </i>
                <div class="">
                    <div>处理中...</div>
                </div>
            </div>

        </div>
    </div>

    <div class="rob-alert-cover" v-if="isBoxShow[4]">
      <div id="alert5" class="rob-alert rob-alert-dismissible" role="alert ">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(4)">
                <span aria-hidden="true">×</span>
            </button>

            <div class="rob-alert-content">
                <div class="">
                    <div>确定要删除吗？</div>

                </div>
            </div>
            <div class="rob-alert-button-color">
                <button type="button" class="rob-btn rob-btn-minor rob-btn-circle ">继续操作</button>
                <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">查看结果</button>
            </div>
        </div>
    </div>

<div class="rob-alert-cover" v-if="isBoxShow[5]">
   <div id="alert6" class="rob-alert container rob-alert-dismissible qb-min-380-g">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close"  @click="closeBox(5)">
                <span aria-hidden="true">×</span>
            </button>
            <div class="rob-alert-title rob-alert-title-color text-center"> 关联公众账号</div>
            <div class="rob-alert-content">

                <div>为了您能够进行正常的业务操作，请及时关联对公账号</div>

            </div>

            <div class="rob-alert-button rob-alert-button-45">
                <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">去关联</button>
            </div>
        </div>
    </div>


<div class="rob-alert-cover" v-if="isBoxShow[6]">
   <div id="alert9" class="rob-alert container rob-alert-dismissible qb-min-380-g">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(6)">
                <span aria-hidden="true">×</span>
            </button>
            <div class="rob-alert-title rob-alert-title-color text-center">用图编辑</div>
            <div class="rob-alert-content">
                <div class="rob-row">
                <div class="rob-col-lg-24 rob-col-md-24 rob-col-sm-24 rob-col-xs-24">
                    <div class="rob-col-lg-6 rob-col-md-6 rob-col-sm-6 rob-col-xs-6 qb-pd0-g">
                        <label class="rob-input-label text-right ">用途:
                        </label>
                    </div>
                    <div class="rob-col-lg-16 rob-col-md-16 rob-col-sm-16 rob-col-xs-16 text-left">
                        <div class="rob-input-item">
                            <input type="text" class="rob-input">
                        </div>
                    </div>
                </div>
                </div>
            </div>

            <div class="rob-alert-button rob-alert-button-45">
                <button type="button" class="rob-btn rob-btn-danger rob-btn-circle ">去关联</button>
            </div>
        </div>
          </div>

<div class="rob-alert-cover" v-if="isBoxShow[7]">
    <div id="alert8" class="rob-alert container rob-alert-dismissible">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(7)">
                <span aria-hidden="true">×</span>
            </button>
            <div class="qb-column-header-g qb-column-header-g--button">
                <ol class="rob-breadcrumb rob-breadcrumb-pointed">

                    <li class="active"><a href="#">贷款进度查询</a></li>
                </ol>

            </div>
            <div class="rob-form-group rob-col-lg-24">

                <div class="rob-col-lg-24 rob-col-md-24 rob-col-sm-24 rob-col-xs-24 qb-alert-g__top">
                    <div class="qb-select-menu-g qb-alert-g__top__high text-left">
                        <div class="rob-row">
                            <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24 qb-rg-bdsilid-g">
                                <div class="qb-select-box-g">
                                    <p>可选菜单：</p>
                                    <div class="qb-c-search-g">
                                        <input type="text" class="search-inp">
                                        <i class="qb-c-search-g__icon-search qb-icon-search"></i>
                                    </div>
                                    <label>管理员但<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>张三<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>李四<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>
                                    <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-add2"></i></label>

                                </div>

                            </div>
                            <div class="rob-col-md-12 rol-col-sm-12 rob-col-xs-24">
                                <p class="search-bt60">可选菜单：</p>

                                <label>管理员但<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>张三<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>李四<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                                <label>管理员但却未完全2<i class="qb-select-menu-g--selectIcon qb-icon-delete1"></i></label>
                            </div>
                        </div>
                    </div>
                    <div class="rob-col-lg-5 rob-col-md-5 rob-col-sm-5 rob-col-xs-24 qb-pd0-g">
                        <div class="qb-red-g rob-input-label text-left "></div>
                    </div>
                </div>
            </div>
            <div class="btn-box">
                <button class="rob-btn rob-btn-danger rob-btn-circle " type="button">搜索</button>
                <button class="rob-btn rob-btn-minor rob-btn-circle " type="button">清除</button>

            </div>
        </div>
</div>


<div class="rob-alert-cover" v-if="isBoxShow[8]">
    <div id="alert7" class="rob-alert content rob-alert-dismissible ">
            <button type="button" class="rob-alert-close" data-dismiss="rob-alert" aria-label="Close" @click="closeBox(8)">
                <span aria-hidden="true">×</span>
            </button>
            <div class="qb-column-header-g qb-column-header-g--button">
                <ol class="rob-breadcrumb rob-breadcrumb-pointed">
                    <li class="active"><a href="#">贷款进度查询</a></li>
                </ol>
            </div>
            <div class=" qb-alert-g__content">
                <div class=" qb-search-g--layout">
                    <div class="qb-search-g btm0">
                        <div class="rob-row rob-no-gutters">
                            <div class="rob-col-lg-9 rob-col-md-9 rob-col-sm-12 rob-col-xs-24">
                                <div class="rob-form-group">
                                    <div class="rob-col-lg-6 rob-col-md-8 rob-col-sm-12 rob-col-xs-24 qb-no-padding-rg">
                                        <label for="inputEmail3" class="rob-input-label">日期哈日期:</label>
                                    </div>
                                    <div class="rob-col-lg-18 rob-col-md-14 rob-col-sm-24 rob-col-xs-24">
                                        <div class="rob-input-item rob-has-icon-right">
                                            <input type="text" class="rob-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="rob-col-lg-9 rob-col-md-9 rob-col-sm-12 rob-col-xs-24">
                                <div class="rob-form-group">
                                    <div class="rob-col-lg-6 rob-col-md-8 rob-col-sm-24 rob-col-xs-24 qb-no-padding-rg">
                                        <label for="inputEmail3" class="rob-input-label">日期哈日期:</label>
                                    </div>
                                    <div class="rob-col-lg-18 rob-col-md-14 rob-col-sm-24 rob-col-xs-24">
                                        <div class="rob-input-item rob-has-icon-right">
                                            <input type="text" class="rob-input">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="rob-col-lg-6 rob-col-md-6 rob-col-sm-12 rob-col-xs-24  column qb-search-g__button ">
                                <div class="rob-col-lg-12 rob-col-md-12 rob-col-sm-12 rob-col-xs-12">
                                    <button class="rob-btn rob-btn-danger rob-btn-circle " type="button">搜索</button>
                                </div>
                                <div class="rob-col-lg-12 rob-col-md-12 rob-col-sm-12 rob-col-xs-12 qb-search-g__button__item">
                                    <button class="rob-btn rob-btn-minor rob-btn-circle " type="button">清除</button>
                                </div>
                            </div>



                        </div>
                    </div>
                </div>
                <!-- 表格 -->
                <div class=" clearfix">
                     <div class="rob-table-responsive qb-alert-g__content__table">
                                        <table class="rob-table rob-table-striped rob-table-hover qb-alert-g__content__table__table__border">
                                            <thead>
                                            <tr>
                                                <th>
                                                    编号
                                                </th>
                                                <th>
                                                    产品
                                                </th>
                                                <th>
                                                    交付时间
                                                </th>
                                                <th>
                                                    状态
                                                </th>
                                                <th>
                                                    交付时间
                                                </th>
                                                <th>
                                                    状态
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr><tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr>
                                            <tr><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td><td><span>lllll</span></td><td> <span>lllll</span></td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                </div>
            </div>
        </div>
</div>


  </div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
      btnText: ['显示代码', '显示代码', '显示代码', '显示代码', '显示代码'],
      isBoxShow: [false],
      isDivShow: [false]
    }
  },
  methods: {
    targetBtn (i) {
      this.$set(this.isDivShow, i, !this.isDivShow[i])
      if (this.isDivShow[i]) {
        this.$set(this.btnText, i, '隐藏代码')
      } else {
        this.$set(this.btnText, i, '显示代码')
      }
    },
    openBox (i) {
      this.$set(this.isBoxShow, i, true)
    },
    closeBox (i) {
      this.$set(this.isBoxShow, i, false)
    }
  }
}
</script>
<style lang="scss" type="text/scss" rel="stylesheet/scss">
@import '../app/assets/css/adminfont.css';
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
  background: #fff!important;
}

.mb60 {
  margin-bottom: 60px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .1s
}
#alert7{
  width: 70%;
    margin-left: -35%;
    margin-top: -233.5px;
}
#alert8{
  margin-top: -276px;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active in below version 2.1.8 */

{
  opacity: 0
}
</style>
